<template>
    <div class="left-item">
        <div class="flex">
            <div class="sjlx-item">
                <div class="sjlx-title">事件类型占比分析</div>
                <div>
                    <div class="lxtj-stat-wrapper">
                        <div v-for="(item,index) in tjList" :key="index" class="lxtj-stat-row">
                            <div :id="'lxtj'+index" class="stat6 lxtj-stat-inner-wrapper">

                            </div>
                            <div class="lxtj-stat-inner-wrapper lxtj-stat-num">
                                <span class="num">{{item.total}}</span>
                                <span>件</span>
                            </div>
                            <img src="../../assets/dp5/sjlx-stat-bg.png" alt="">
                            <div class="lxtj-text">{{item.name}}
                                <span>({{item.ratio}})</span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="sjzt-item">
                <div id="sjztStat">

                </div>
                <div class="sjzt-title">事件状态占比分析</div>
            </div>
        </div>
        <div class="flex">
            <div class="sjgf-item">
                <div class="sjgf-title">
                    <p class="title1">事件高发区域分析</p>
                    <div class="title2">事件高发区域分析</div>
                </div>
                <div id="sjgfqy"></div>
            </div>
            <div class="sjgf-item">
                <div class="sjgf-title">
                    <p class="title1">事件高发时段分析</p>
                    <div class="title2 sd-title2">事件高发时段分析</div>
                </div>
                <div id="sjgfsd"></div>
            </div>
        </div>
        <div class="flex">
            <div class="top-item">
                <div class="top-title">
                    事件上报top 5
                </div>
                <div class="ljbj">
                    <ul class="top-ul">
                        <li v-for="(item,index) in sbTopList" :key="index" class="top-li">
                            <div class="top-num-bg">
                                <span class="top-num">0{{index+1}}</span>
                            </div>
                            <div class="top-strip">
                                <div :style="{ width: `${90-(index*10)}%` }" class="inner-strip">

                                </div>
                                <div class="inner-strip-wrapper">
                                    <div class="item1">{{item.name}}</div>
                                    <div class="item2">{{item.total}}</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="top-item cz-item">
                <div class="top-title cz-title">
                    事件处置top 5
                </div>
                <div class="ljbj">
                    <ul class="top-ul">
                        <li v-for="(item,index) in czTopList" :key="index" class="top-li">
                            <div class="top-num-bg">
                                <span class="top-num">0{{index+1}}</span>
                            </div>
                            <div class="top-strip">
                                <div :style="{ width: `${90-(index*10)}%` }" class="inner-strip">

                                </div>
                                <div class="inner-strip-wrapper">
                                    <div class="item1">{{item.name}}</div>
                                    <div class="item2">{{item.total}}</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import "echarts-liquidfill";
import Pubsub from "../../utils/pubsub";
import {
    getCgCountByEventType,
    getCgCountByEventStatus,
    getCgCountByEventArea,
    getCgCountByTimeInterval,
    getCgReportTop5,
    getCgDealTop5,
} from "../../config/api";

import {
    lxtjOption,
    sjztOption,
    sjgfqyOption,
    sjgfsdOption
} from "./statConfig";
export default {
    data() {
        return {
            commonRequest:{
                type:"",
            },
            sbTopList: [],
            czTopList: [],
            tjList: []
        };
    },
    mounted(){
        this.pubsub_token1 = Pubsub.subscribe("refreshDpData", (t, args) => {
            let { type } = args;
            this.commonRequest.type = type;
            this.initData();
        });
        this.initData();
        this.initStat();
    },
    destroyed(){
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
    },
    methods: {
        initData(){
            this.getCgCountByEventType();
            this.getCgCountByEventStatus();
            this.getCgCountByEventArea();
            this.getCgCountByTimeInterval();
            this.getCgReportTop5();
            this.getCgDealTop5();
        },
        /**
         * 初始化echarts
         */
        initStat() {
            this.getSjztData(); //事件状态占比分析
            this.getSjgfqyData(); //事件高发区域分析
            this.getSjgfsdData(); //事件高发区域分析
        },
        getTjData() {
            this.tjList.map((item, index) => {
                this[`lxtj${index}`] = echarts.init(
                    document.getElementById(`lxtj${index}`)
                );
                this[`lxtj${index}`].setOption(lxtjOption(item.total, 6000));
            });
        },
        getSjztData() {
            
        },
        getSjgfqyData() {
            this.chart2 = echarts.init(document.getElementById("sjgfqy"));
            this.chart2.setOption(sjgfqyOption());
        },
        getSjgfsdData() {
            this.chart3 = echarts.init(document.getElementById("sjgfsd"));
            this.chart3.setOption(sjgfsdOption());
        },
        /**
         * 事件类型占比分析
         */
        getCgCountByEventType(){
            getCgCountByEventType(this.commonRequest).then((result)=>{
                this.tjList = result.data || [];
                this.$nextTick(()=>{
                    this.getTjData();
                })
            })
        },
        /**
         * 事件状态占比分析
         */
        getCgCountByEventStatus(){
            getCgCountByEventStatus(this.commonRequest).then((result)=>{
                let data = result.data || [];
                let legendData = [];
                let o = {};
                data.map((item,index)=>{
                    let s = `${item.total}(件)${item.name},占比${item.ratio}`;
                    legendData.push(s);
                    o[`name${index}`] = s;
                    o[`value${index}`] = item.total;
                })
                this.chart1 = echarts.init(document.getElementById("sjztStat"));
                this.chart1.setOption(sjztOption({legendData,seriesData:o}));
            })
        },
        /**
         * 事件高发区域
         */
        getCgCountByEventArea(){
            getCgCountByEventArea(this.commonRequest).then((result)=>{
                let d = result.data;
                let x = d.xAxis;
                let data = d.data;
                let series = [{data}];
                let xAxis = {};
                xAxis.data = x;
                this.chart2.setOption({
                    xAxis,
                    series,
                })
                
            })
        },
        /**
         * 事件高发时段
         */
        getCgCountByTimeInterval(){
            getCgCountByTimeInterval(this.commonRequest).then((result)=>{
                let d = result.data;
                let x = d.xAxis;
                let data = d.data;
                let series = [{data}];
                let xAxis = {};
                xAxis.data = x;
                this.chart3.setOption({
                    xAxis,
                    series,
                })
            })
        },
        /**
         * 事件上报top5
         */
        getCgReportTop5(){
            getCgReportTop5(this.commonRequest).then((result)=>{
                let data = result.data || [];
                this.sbTopList = data;
            })
        },
        /**
         * 事件处理top5
         */
        getCgDealTop5(){
            getCgDealTop5(this.commonRequest).then((result)=>{
                let data = result.data || [];
                this.czTopList = data;
            })
        },
    }
};
</script>

<style lang="scss" scoped>
@import "../../css/dpCommon.scss";
.left-item {
    box-sizing: border-box;
    width: 946px;
    padding-top: 91px;
}
.sjlx-item {
    height: 235px;
    display: flex;
    width: 462px;
    box-sizing: border-box;
    padding-left: 35px;
    .sjlx-title {
        writing-mode: vertical-rl;
        box-sizing: border-box;
        padding-top: 40px;
        font-size: 16px;
    }
}
.lxtj-stat-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    flex-wrap: wrap;
    .lxtj-stat-num {
        display: flex;
        align-items: center;
        justify-content: center;

        .num {
            font-size: 22px;
            color: #fff000;
            margin-right: 3px;
            & + span {
                color: #c8e1ff;
                font-size: 12px;
                display: inline-block;
                margin-top: 3px;
            }
        }
    }
}
.lxtj-stat-row {
    font-size: 12px;
    color: #c8e1ff;
    text-align: center;
    position: relative;
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    .lxtj-stat-inner-wrapper {
        height: 91px;
        width: 88px;
        position: absolute;
    }
}
.lxtj-text {
    margin-top: 8px;
    span {
        color: #fff000;
    }
}
.sjzt-item {
    position: relative;
    #sjztStat {
        width: 474px;
        height: 235px;
    }
    .sjzt-title {
        color: #c8e1ff;
        font-size: 16px;
        position: absolute;
        top: 25px;
        left: 68px;
    }
}
.sjgf-item {
    height: 258px;
    width: 468px;
    margin-top: 10px;
    .sjgf-title {
        height: 38px;
        position: relative;
        .title1 {
            position: absolute;
            left: 168px;
            font-size: 16px;
            color: #c8e1ff;
        }
        .title2 {
            color: #ddd;
            font-size: 12px;
            position: absolute;
            right: 30px;
            top: 20px;
            &::before {
                content: "";
                display: block;
                position: absolute;
                left: -20px;
                top: 3px;
                height: 12px;
                width: 12px;
                border-radius: 8px;
                background: #bb0626;
            }
        }
        .sd-title2 {
            right: 10px;
            top: 15px;
            &:before {
            }
        }
    }
    #sjgfqy {
        height: 230px;
        width: 468px;
    }
    #sjgfsd {
        height: 230px;
        width: 468px;
    }
}
.ljbj {
    width: 468px;
    .top-ul {
        margin-top: 5px;
        color: #fff;
    }
    .top-num-bg {
        height: 36px;
        width: 36px;
        box-sizing: border-box;
        background: #000626;
        border-radius: 50%;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        padding: 5px;
        border: solid 1px rgba(213, 239, 255, 0.6);
    }
    .top-num {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        position: absolute;
        height: 26px;
        width: 26px;
        background: #323f86;
        border-radius: 30px;
        font-size: 16px;
    }
    .top-strip {
        width: 428px;
        margin-left: 25px;
        height: 36px;
        position: relative;
        display: flex;
        align-items: center;
        &::before {
            content: "";
            position: absolute;
            left: -3px;
            height: 42px;
            width: 42px;
            border-radius: 50%;
            background: #000626;
            z-index: 999;
        }
    }
    .inner-strip {
        height: 36px;
        background: linear-gradient(to left, #323f86 98, transparent 2%);
        transition: all 0.3s ease-out;
        display: flex;
        align-items: center;
        position: absolute;
        left: 20px;
    }
    .inner-strip-wrapper {
        display: flex;
        position: absolute;
        line-height: 36px;
        align-items: center;
        .item1 {
            width: 100px;
            margin-left: 44px;
        }
        .item2 {
            width: 55px;
        }
    }
    .top-li {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
}
.top-item {
    padding-left: 45px;
    box-sizing: border-box;
    .top-title {
        height: 50px;
        box-sizing: border-box;
        font-size: 16px;
        color: #c8e1ff;
        padding-top: 30px;
        margin-bottom: 10px;
    }
}
.cz-item{
    padding-left: 0;
}
.cz-title{
    padding-left: 30px;
}
</style>